<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.w3.org/1999/xhtml">
<body>
    <div th:fragment="header">


        <header>
            <nav class="navbar navbar-expand-lg px-4 py-2 bg-white shadow"><a href="#" class="sidebar-toggler text-gray-500 mr-4 mr-lg-5 lead"><i class="fas fa-align-left"></i></a>
                <a href="/admin/index" class="navbar-brand font-weight-bold text-uppercase text-base">Bubbly Dashboard</a>
                    <ul class="ml-auto d-flex align-items-center list-unstyled mb-0">
                        <li class="nav-item">
                            <ul class="cl">
                                <span>身份：</span>
                                <span shiro:hasRole="admin">超级管理员</span>
                                <span shiro:hasRole="student">学生</span>
                                <span shiro:hasRole="teacher">老师</span>
                                <span shiro:hasRole="principal">校长</span>
                                <span shiro:hasRole="headmaster">班主任</span>
                                &nbsp;
                                <span>你好，</span>
                                <span><shiro:principal/></span>
                                &nbsp;
                                &nbsp;
                            </ul>
                        </li>
<!--                        <li class="nav-item dropdown mr-3">-->
<!--                            <a id="notifications" href="http://example.com" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="nav-link dropdown-toggle text-gray-400 px-1">-->
<!--                                <i class="fa fa-bell"></i><span class="notification-icon"></span></a>-->
<!--                            <div aria-labelledby="notifications" class="dropdown-menu"><a href="#" class="dropdown-item">-->
<!--                                <div class="d-flex align-items-center">-->
<!--                                    <div class="icon icon-sm bg-violet text-white"><i class="fab fa-twitter"></i></div>-->
<!--                                    <div class="text ml-2">-->
<!--                                        <p class="mb-0">You have 2 followers</p>-->
<!--                                    </div>-->
<!--                                </div></a><a href="#" class="dropdown-item">-->
<!--                                <div class="d-flex align-items-center">-->
<!--                                    <div class="icon icon-sm bg-green text-white"><i class="fas fa-envelope"></i></div>-->
<!--                                    <div class="text ml-2">-->
<!--                                        <p class="mb-0">You have 6 new messages</p>-->
<!--                                    </div>-->
<!--                                </div></a><a href="#" class="dropdown-item">-->
<!--                                <div class="d-flex align-items-center">-->
<!--                                    <div class="icon icon-sm bg-blue text-white"><i class="fas fa-upload"></i></div>-->
<!--                                    <div class="text ml-2">-->
<!--                                        <p class="mb-0">Server rebooted</p>-->
<!--                                    </div>-->
<!--                                </div></a><a href="#" class="dropdown-item">-->
<!--                                <div class="d-flex align-items-center">-->
<!--                                    <div class="icon icon-sm bg-violet text-white"><i class="fab fa-twitter"></i></div>-->
<!--                                    <div class="text ml-2">-->
<!--                                        <p class="mb-0">You have 2 followers</p>-->
<!--                                    </div>-->
<!--                                </div></a>-->
<!--                                <div class="dropdown-divider"></div><a href="#" class="dropdown-item text-center"><small class="font-weight-bold headings-font-family text-uppercase">View all notifications</small></a>-->
<!--                            </div>-->
<!--                        </li>-->
                        <li class="nav-item dropdown ml-auto"><a id="userInfo" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="nav-link dropdown-toggle">
                            <img th:src="${session.filename}" alt="Jason Doe" style="max-width: 2.5rem;" class="img-fluid rounded-circle shadow"></a>
                            <div aria-labelledby="userInfo" class="dropdown-menu" style="margin:0;padding:auto;">
                                <form id="fileForm" action="/admin/updateImg" method="post" enctype="multipart/form-data" style="margin:0;padding:0;height:47.2px" class="dropdown-item">
                                    <input name="imgFile" id="imgFile" type="file" accept="image/*" style="display: none">
                                    <input type="button" class="dropdown-item" value="上传头像" onclick="upload()">
                                </form>
                                <a href="/admin/updatePasswordUI" class="dropdown-item">修改密码</a>
                                <a href="/islogout" class="dropdown-item">Logout</a>
                            </div>
                        </li>
                    </ul>
                <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
                <script type="text/javascript">
                    function upload(){
                        // alert("123");
                        $("#imgFile").click();
                        $("#imgFile").unbind().change(function(){
                            $("#fileForm").submit();
                        })
                    }
                </script>
            </nav>
        </header>
    </div>

</body>

</html>
